import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {Avatar, Button, Descriptions, Icon, Input, Modal, Upload} from "antd";
import Title from "antd/es/typography/Title";
import './style.css'
import Text from "antd/es/typography/Text";

export default @inject('store') @observer
class UserSelf extends Component {
    constructor(props) {
        super(props);

        console.log(props.store);
        this.state = {
            imgUrl: '',
            oldPassword: '',
            newPassword: '',
            newPasswordRepeat: '',

            setSelfDataVisible: false,
            nickname: '',
            phone: '',
        };
    }

    _uploadImg(info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
            // return
        }

        switch (info.file.status) {
            case "done":
                window.$message.success(`${info.file.name} file uploaded successfully`);
                console.log(info);
                console.log("img url:", info.fileList[0].response);
                this._updateAvatarUrl(info.fileList[0].response.url);
                // this.setState({imgUrl: info.fileList[0].response.url});
                break;
            case "error":
                window.$message.error(`${info.file.name} file upload failed.`);
                break;
            default:
        }
    }

    _updateAvatarUrl(url) {
        window.$http.postForm('/self/setAvatar', {
            avatar: url
        }).then(res => {
            if (res.status === 10000) {
                window.$message.success("修改头像成功");
                window.location.reload(false);
                // setTimeout(() => window.location.reload(false), 1000);
                // this._userInfo();
                return
            }

            window.$message.warn(res.message);
        }).catch(err => {
            window.$message.error(err.message);
        })
    }

    _setPassword() {
        const {oldPassword, newPassword, newPasswordRepeat} = this.state;
        if (oldPassword === '' || newPassword === '' || newPasswordRepeat === '') {
            window.$message.warn("密码不能为空");
            return
        }
        if (newPassword !== newPasswordRepeat) {
            window.$message.warn("重复密码不一致");
            return
        }

        window.$http.postForm('/self/setPassword', {
            old_password: oldPassword,
            new_password: newPassword,
            new_password_repeat: newPasswordRepeat,
        }).then(res => {
            if (res.status === 10000) {
                window.$message.success("修改密码成功");
                this.setState({oldPassword: '', newPassword: '', newPasswordRepeat: ''});
                return
            }

            window.$message.warn(res.message);
        }).catch(err => {
            window.$message.error(err.message);
        })
    }

    _setSelfData() {
        window.$http.postForm('/self/setData', {
            nickname: this.state.nickname,
            phone: this.state.phone,
        }).then(res => {
            if (res.status === 10000) {
                window.$message.success("修改信息成功");
                this.setState({setSelfDataVisible: false, nickname: '', phone: ''});
                window.location.reload();
                return
            }

            window.$message.warn(res.message);
        }).catch(err => {
            window.$message.error(err.message);
        })
    }

    auth(authentication) {
        switch (authentication) {
            case 0:
                return <Text>普通用户</Text>;
            case 1:
                return <Text>会员</Text>;
            case 255:
                return <Text>管理员用户</Text>;
            default:
        }
    }

    render() {
        return (
            <div>
                {
                    this.props.store.user.user ?
                        <>
                            <div>
                                {/*{console.log(this.props.store.user.user.avatar)}*/}
                                <Descriptions title={'用户信息'} bordered>
                                    <Descriptions.Item label={'ID'}>{this.props.store.user.user.ID}</Descriptions.Item>
                                    <Descriptions.Item
                                        label={'创建时间'}>{this.props.store.user.user.CreatedAt}</Descriptions.Item>
                                    <Descriptions.Item
                                        label={'用户名'}>{this.props.store.user.user.username}</Descriptions.Item>
                                    <Descriptions.Item
                                        label={'昵称'}>{this.props.store.user.user.nickname}</Descriptions.Item>
                                    <Descriptions.Item label={'头像'}>
                                        <Avatar style={{width: 24, height: 24, marginRight: 5}}
                                                src={this.props.store.user.user.avatar}/>
                                        <Upload name={'avatar'}
                                                action={'/upload/image'}
                                                accept={'.png,.jpg'}
                                                showUploadList={false}
                                                onChange={(info) => this._uploadImg(info)}
                                        ><Button size={"small"}>上传</Button></Upload>
                                    </Descriptions.Item>
                                    <Descriptions.Item
                                        label={'手机号'}>{this.props.store.user.user.phone}</Descriptions.Item>
                                    <Descriptions.Item
                                        label={'权限'}
                                        span={2}>{this.auth(this.props.store.user.user.authorization)}</Descriptions.Item>
                                    <Descriptions.Item label={'操作'}><Button
                                        type={"primary"} onClick={() => this.setState({setSelfDataVisible: true})}
                                    >修改</Button></Descriptions.Item>
                                </Descriptions>
                                {
                                    this.state.setSelfDataVisible ?
                                        <Modal
                                            title={'修改信息'}
                                            onOk={() => this._setSelfData()}
                                            onCancel={() => this.setState({
                                                setSelfDataVisible: false,
                                                nickname: '', phone: '',
                                            })}
                                            visible={this.state.setSelfDataVisible} closable={false}>
                                            <Input prefix={<Icon type={'code'}/>} placeholder={'昵称'}
                                                   value={this.state.nickname} style={{marginBottom: 10}}
                                                   onChange={({target}) => this.setState({nickname: target.value})}/>
                                            <Input prefix={<Icon type={'phone'}/>} placeholder={'手机号'}
                                                   value={this.state.phone}
                                                   onChange={({target}) => this.setState({phone: target.value})}/>
                                        </Modal> : null
                                }
                            </div>
                            <div style={{width: 300, marginTop: 30}}>
                                <Title level={4} style={{fontSize: 16, marginBottom: 20}}>修改密码</Title>
                                <Input.Password
                                    onChange={({target}) => this.setState({oldPassword: target.value})}
                                    value={this.state.oldPassword} className='password-input' placeholder={'旧密码'}
                                    prefix={<Icon type={"tool"}/>}/>
                                <Input.Password
                                    onChange={({target}) => this.setState({newPassword: target.value})}
                                    value={this.state.newPassword} className='password-input' placeholder={'新密码'}
                                    prefix={<Icon type={"key"}/>}/>
                                <Input.Password
                                    onChange={({target}) => this.setState({newPasswordRepeat: target.value})}
                                    value={this.state.newPasswordRepeat} className='password-input' placeholder={'重复密码'}
                                    prefix={<Icon type={"key"}/>}/>
                                <Button type={"primary"} onClick={() => this._setPassword()}>修改</Button>
                            </div>

                        </>
                        : null
                }
            </div>
        )
    }
}